import { React, useState, useEffect} from 'react'

function AlDesign() {
  const [activeTab, setActiveTab] = useState(0);
  const [isSticky, setIsSticky] = useState(false);

  // 监听滚动事件
  useEffect(() => {

    const handleScroll = () => {
      // 如果页面滚动的距离大于100px，就固定元素
      if (window.scrollY > 100) {
        setIsSticky(true);
      } else {
        setIsSticky(false);
      }
    };

    // 绑定滚动事件监听器
    window.addEventListener('scroll', handleScroll);

    // 清理副作用，移除事件监听器
    return () => {
      window.removeEventListener('scroll', handleScroll);
    };
    
  }, []);
  const tabs = [
    {
      id: 0, title: '设计', content: [
        <div key={0}>
          <h2>AI设计</h2>
          <h3>小红书</h3>
          <div style={{ display: 'flex', flexWrap: 'wrap', textAlign: 'center' }}>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://gaoding-market.dancf.com/market-operations/independent/side/2b718f467e734432b478180ddc79ee91/1724834159124.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>大字封面</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://gaoding-market.dancf.com/market-operations/independent/side/c2d17111bb34495bbc3ddb76084f5e5d/1724832955474.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>科普攻略</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://gaoding-market.dancf.com/market-operations/independent/side/cee611ca2dd6466aaf2c3c63a5a361bf/1734949712866.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>图文封面</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://gaoding-market.dancf.com/market-operations/independent/side/cdc72e9dd14348a789850ee226c2d995/1734949740943.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>人物封面</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://gaoding-market.dancf.com/market-operations/independent/side/2b718f467e734432b478180ddc79ee91/1724834159124.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>插画封面</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://gaoding-market.dancf.com/market-operations/independent/side/dfbe949dd6b048f2a53de3ebc590d879/1733755165370.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>备忘录</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://gaoding-market.dancf.com/market-operations/independent/side/f1fbe49931ff4163bc14f7d9bd3a97ac/1734949783738.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>拼图封面</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://gaoding-market.dancf.com/market-operations/independent/side/1fed6c24ff8845e0a721b2078174d3d5/1734949797472.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>书摘语录</p>
            </div>
          </div>
          <h3>电商</h3>
          <div style={{ display: 'flex', flexWrap: 'wrap', textAlign: 'center' }}>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://st0.dancf.com/market-operations/market/side/1706771166610.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>商品主图</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://st0.dancf.com/market-operations/market/side/1706771293727.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>竖版电商海报</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://st0.dancf.com/market-operations/market/side/1706771241747.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>横版电商海报</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://st0.dancf.com/market-operations/market/side/1706771276140.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>产品营销</p>
            </div>
          </div>
          <h3>新媒体</h3>
          <div style={{ display: 'flex', flexWrap: 'wrap', textAlign: 'center' }}>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://st0.dancf.com/market-operations/market/side/1706771222344.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>LOGO</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://st0.dancf.com/market-operations/market/side/1706771742978.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>公众号次图</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://st0.dancf.com/market-operations/market/side/1706771153985.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>横版海报</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://st0.dancf.com/market-operations/market/side/1706771334652.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>竖版视频封面</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://st0.dancf.com/market-operations/market/side/1706771128912.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>公众号首图</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://st0.dancf.com/market-operations/market/side/1706771378546.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>横版视频封面</p>
            </div>
          </div>
          <h3>私域</h3>
          <div style={{ display: 'flex', flexWrap: 'wrap', textAlign: 'center' }}>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://st0.dancf.com/market-operations/market/side/1706771347077.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>人物宣传</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://st0.dancf.com/market-operations/market/side/1706771306831.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>日签问候</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://st0.dancf.com/market-operations/market/side/1706771561928.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>喜报</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://st0.dancf.com/market-operations/market/side/1706771357241.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>邀请函</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://st0.dancf.com/market-operations/market/side/1706771573149.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>人物头像</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://st0.dancf.com/market-operations/market/side/1706771583904.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>朋友圈封面</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://st0.dancf.com/market-operations/market/side/1706771388817.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>书单</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://st0.dancf.com/market-operations/market/side/1706771496178.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>拼图PLOG</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://st0.dancf.com/market-operations/market/side/1706771539349.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>贺卡</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://st0.dancf.com/market-operations/market/side/1706771549277.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>倒计时</p>
            </div>
            <div style={{ backgroundColor: '#f5f5f5', padding: '10px', display: 'inline-block', marginRight: '10px', marginTop: '10px' }}>
              <p><img style={{ width: '100px', height: '100px' }} src="https://st0.dancf.com/market-operations/market/side/1706771594918.png?x-oss-process=image%2Fresize%2Cw_272%2Fformat%2Cwebp" alt="" /></p>
              <p>晒单海报</p>
            </div>
          </div>
        </div>
      ]
    },
    { id: 1, title: '绘画', content: '这是Tab 2的内容' },
    { id: 2, title: '素材', content: '这是Tab 3的内容' },
    { id: 3, title: '文案', content: '这是Tab 4的内容' },
  ];
  return (
    <div>
      <div style={{
        position: isSticky ? 'fixed' : 'relative',
        top: 0,
        left: 0,
        right: 0,
        padding: '10px 20px',
        transition: 'all 0.3s ease',
        zIndex: 1000,
      }}><img src="https://cdn.dancf.com/fe-assets/20240415/f522b2e1febe18e1781c14db2e9e1864.svg" alt="" /></div>
      <div style={{
        display: 'flex',
      }}>
        <div style={{
          width: '200px',
          borderRight: '1px solid #ccc',
     
        }}>
          <ul style={{ listStyleType: 'none', padding: 0 }}>
            {tabs.map(tab => (
              <li
                key={tab.id}
                onClick={() => setActiveTab(tab.id)}
                style={{
                  padding: '10px',
                  cursor: 'pointer',
                  backgroundColor: activeTab === tab.id ? '#ddd' : 'transparent',
                  marginBottom: '5px',
                }}
              >
                {tab.title}
              </li>
            ))}
          </ul>
        </div>

        <div style={{ flexGrow: 1, padding: '10px' }}>
          <div>{tabs[activeTab].content}</div>
        </div>
      </div>
    </div>
  )
}

export default AlDesign
